<template>
  
<div>


<el-form ref="form" :model="form" label-width="100px" style="width:500px">

  <el-form-item label="车位类型：">
    <el-select v-model="form.pid" placeholder="请选择车位类型">
      <el-option label="大车位" value="3"></el-option>
      <el-option label="中车位" value="2"></el-option>
      <el-option label="小车位" value="1"></el-option>
    </el-select>
  </el-form-item>



  

 
 <el-form-item label="省份：">
 <el-select v-model="shengValue" placeholder="请选择省份" @change="cSheng()">
            <el-option
              v-for="item in sheng_options"
              :key="item.shengId"
              :label="item.shengName"
              :value="item.shengId"
            >
            </el-option> </el-select
        >
        </el-form-item>


        <el-form-item label="市区：">
          <el-select v-model="shiValue" placeholder="请选择区域" @change="cShi()">
            <el-option
              v-for="item in shi_options"
              :key="item.shiId"
              :label="item.shiName"
              :value="item.shiId"
            >
            </el-option> </el-select
        ></el-form-item>

        <el-form-item label="区域：">
       <el-select v-model="quValue" placeholder="区" style="margin-bottom:20px">
            <el-option
              v-for="item in qu_options"
              :key="item.quId"
              :label="item.quName"
              :value="item.quId"
            >
            </el-option> </el-select
        >




  <el-form-item label="具体地址："  style="margin-left: -100px;">
    <el-input v-model="form.cheweiAddress" placeholder="请输入具体地址">
     
    </el-input>
  </el-form-item>


        
        
    </el-form-item>
        

    <el-form-item>
    <el-button type="primary" @click="onSubmit">立即提交</el-button>
    <el-button @click="reset">重置</el-button>
  </el-form-item>

</el-form>

</div>

</template>

<script>
import { resetTracking } from '@vue/reactivity';

  export default {
    mounted(){
         this.updateSelect();
         this.uId=JSON.parse(sessionStorage.getItem("u")).uId;
    },
    data() {
      return {

        uId:"",

      form: {
          cheweiAddress: '',
          pid:"",
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },

      inputvalue: "",
      sheng_options: [],
      shi_options: [],
      qu_options: [],
      shengValue: "",
      shiValue: "",
      quValue: "",
      }
    },
    methods: {
      updateSelect() {
      // 收集参数
      // 发送请求
      this.$axios
        .post("sheng/findAll")
        // 处理响应
        .then((resp) => {
          let r = resp.data;
          if (r.code == 200) {
            this.sheng_options = r.data;
          }
        });
    },
       cSheng() {
      let config = {
        headers: {
          "Content-Type": "text/plain",
        },
      };
      // 更改省的时候区异步请求获取市的信息
      this.$axios
        .post("shi/findAll", this.shengValue, config)
        // 处理响应
        .then((resp) => {
          let r = resp.data;
          if (r.code == 200) {
            this.shi_options = r.data;
          }
        });
    },
    //   市下拉列表change事件
    cShi() {
      let config = {
        headers: {
          "Content-Type": "text/plain",
        },
      };
      // 更改市的时候区异步请求获取市的信息
      this.$axios
        .post("qu/findAll", this.shiValue, config)
        // 处理响应
        .then((resp) => {
          let r = resp.data;
          if (r.code == 200) {
            this.qu_options = r.data;
          }
        });
    },
      // ...
      onSubmit() {

        let CheweiInfo={
          "shengId":this.shengValue,
          "shiId":this.shiValue,
          "quId":this.quValue,
          "uId":this.uId,
          "cheweiAddress":this.form.cheweiAddress,
          "pId":this.form.pid,
          "cheweiState":"3"
        }


       
       this.$axios
        .post("chewei/save",CheweiInfo)
        // 处理响应
        .then((resp) => {

        if (resp.data.code == 200) {
          this.$message({
            message: "提交申请成功",
            type: "success",
          });
        }
        });
       
        
       this.reset();
      },

      reset(){
        this.shengValue
        = this.shiValue
        =this.quValue
        =this.form.cheweiAddress
        =this.form.pid=null

      }
    }
  }
</script>
<style>

</style>